<template>
  <div class="box">
    <Navbar />
    <div class="content">
      <router-view></router-view>
      <NewProjectPanel />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import NewProjectPanel from '../modules/home/components/NewProjectPanel'
import Navbar from '@/components/common/Navbar.vue'

export default {
  name: 'Home',
  components: {
    Navbar,
    NewProjectPanel,
  },
  data() {
    return {
      activeIndex: '1',
      userId: null,
      // eslint-disable-next-line no-sparse-arrays
      childRouteList: ['/' ],
      // childRouteList: [,'/', '/index', '/chat', '/tutorial', '/systemdesign'],
      isCollapsed: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'allPageNo', 'ownPageNo']),
  },
  methods: {
    ...mapMutations(['setGraphProjectId', 'setShowCreatePanel']),
    ...mapActions([
      // 'getListByUserId',
      'userLogout',
      'getUserInfo',
      'getAllListByPageNo',
      'getOwnListByPageNo',
      // 'getAllListAmount',
      // 'getOwnListAmount',
    ]),
    createNewGraph() {
      this.setShowCreatePanel(true)
    },
    logout() {
      localStorage.removeItem('coin-token')
      this.$router.push('/user')
    },
    handleSelect(key) {
      this.activeIndex = key
      const path = this.childRouteList[key]
      this.$router.push(path)
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  },
  watch: {
    '$route' (to, from) {
      const contentElement = document.querySelector('.content');
      if (to.path === '/index') {
        contentElement.style.backgroundColor = '#020138';
      } else {
        contentElement.style.backgroundColor = '#020138';
      }
    }
  },
  mounted() {
    const contentElement = document.querySelector('.content');
    if (this.$route.path === '') {
      contentElement.style.backgroundColor = 'black';
    }
    // console.log(`path: ${this.$route.path}`)
    this.activeIndex = this.childRouteList.indexOf(this.$route.path).toString()
    this.getUserInfo().then((success) => {
      if (success) {
        this.userId = this.userInfo.id
        // this.getOwnListAmount(this.userId)
        // this.getAllListAmount()
        this.getOwnListByPageNo({
          userId: this.userId,
          pageNo: this.ownPageNo,
        })
        this.getAllListByPageNo(this.allPageNo)
      }
    })
  },
}
</script>

<style>
.box {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #0B0F32;   /* 深色 */
}

.content {
  flex: 1;
  /*padding: 20px;*/
  box-sizing: border-box;
  overflow: auto;
  height: 100vh;
  transition: margin-left 0.3s;
  background-color: #0B0F32;   /* 深色 */
}

.content.collapsed {
  margin-left: 64px;
}
</style>
